<template>
  <div class="movie-List">
    <div
      v-for="(item,index) in movieList"
      :key="item.id"
      :title="item"
      class="movie-item"
      @click="goMovie(item.id,item.nm)"
    >
      <p class="tit" v-show="item.comingTitle&& $route.path==='/movie/f-hot'">{{item.comingTitle}}</p>
      <div class="down">
        <div class="left">
          <!-- <img v-lazy="item.img|replacewd" /> -->
          <img v-lazy="fixSrc(item.img)" />
        </div>
        <div class="center">
          <p class="title">
            {{item.nm}}
            <span
              class="icon"
              v-if="item.version =='v3d imax'"
              :class="{'active1': item.version =='v3d imax'}"
            ></span>
            <span v-else class="icon" :class="{'active2': item.version =='v2d imax'}"></span>
          </p>
          <p class="comment" v-if="item.sc > 0 || item.preShow">
            观众评
            <span class="score">{{item.sc}}</span>
          </p>
          <p class="comment" v-else-if="item.sc == 0">
            <span class="score">{{item.wish}}</span>人想看
          </p>
          <p class="star">主演:{{item.star}}</p>
          <p class="num">{{item.showInfo}}</p>
        </div>
        <div class="right">
          <button
            v-if="movieList[index].globalReleased"
            class="btn"
            type="button"
            name="button"
          >{{title[0]}}</button>
          <button
            v-else-if="$route.path==='/movie/f-hot' && !movieList[index].globalReleased"
            class="btn2"
            type="button"
            name="button"
          >{{title[2]}}</button>
          <button v-else class="btn1" type="button" name="button">{{title[1]}}</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['movieList'],
  data: () => ({
    title: ['购票', '预售', '想看']
  }),
  created () {},
  methods: {
    fixSrc (wh) {
      if (wh !== undefined) {
        return wh.replace('w.h', '64.90')
      }
    },
    goMovie (id, title) {
      this.$store.state.title = title
      this.$router.push('/movie/' + id)
    }
  },
  filters: {
    replacewd: data => {
      return data.replace('w.h', '100.100')
    }
  }
}
</script>
<style lang="less" scoped>
.movie-List {
  .tit {
    font-size: 14px;
    color: #333;
  }
  p {
    margin: 0;
    padding: 0;
  }
  .movie-item {
    padding: 10px;
    font-size: 13px;
    color: #666;
    .down {
      display: flex;
      .left {
        width: 64px;
        height: 90px;
        margin-right: 10px;
        img {
          width: 100%;
        }
      }
      .center {
        width: 202px;
        .icon {
          line-height: 14px;
          display: inline-block;
          margin-top: 5px;
          -webkit-box-flex: 0;
          flex: 0 0 auto;
          border-radius: 2px;
          margin-right: 3px;
          color: #3c9fe6;
          width: 43px;
          height: 14px;
        }
        .active1 {
          background: url('../../assets/movie-hot/2d_max.png') no-repeat;
          background-size: 43px 14px;
        }
        .active2 {
          background: url('../../assets/movie-hot/3d_max.png') no-repeat;
          background-size: 43px 14px;
        }
        p {
          margin: 3px 0px;
        }
        .title {
          font-size: 17px;
          color: #333;
          font-weight: 700;
        }
        .star {
          // width: 202px;
          height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .score {
          font-weight: 700;
          color: #faaf00;
          font-size: 15px;
        }
      }
      .right {
        display: flex;
        align-items: center;
        margin-left: 20px;
        .btn,
        .btn2,
        .btn1 {
          width: 47px;
          height: 27px;
          line-height: 28px;
          text-align: center;
          box-sizing: border-box;
          background-color: #f03d37;
          color: #fff;
          border-radius: 4px;
          white-space: nowrap;
          font-size: 12px;
          cursor: pointer;
          border: 0;
        }
        .btn1 {
          background-color: #3c9fe6;
        }
        .btn2 {
          background-color: #faaf00;
        }
      }
    }
  }
}
</style>
